*{
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-family: 'Audiowide';
}

.wrapper{
        position: absolute;
        background-size: cover;
        background-position: center center;
        height: 100%;
        width: 100%;
        background-image: url("../img/choose-level/bg.jpg");
        overflow: hidden;
}

.bg-holder {
        height: 100%;
        width: 100%;
        position: relative;
        background-size: cover;
        background:rgba(40, 57, 101, .7);
}

.title {
        font-size: 2.5rem;
        position: absolute;
        margin-left: 33%;
        margin-top: 4rem;
        z-index:1;
        color: #ffffff;
}

.cols{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
                justify-content: center;
}

.col{
        width: calc(30% - 2rem);
        margin: 5rem;
        margin-top: 12rem;
        cursor: pointer;
}

.container{
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -webkit-perspective: 1000px;
                perspective: 1000px;
}

.front,
.back{
        background-size: cover;
        background-position: center;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        text-align: center;
        min-height: 400px;
        height: auto;
        border-radius: 10px;
        color: #fff;
        font-size: 1.5rem;
}

.front:after{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        content: '';
        display: block;
        opacity: .6;
        background:rgba(55, 58, 66, 0.6);
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        border-radius: 10px;
}

.container:hover .front,
.container:hover .back{
        -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-image: url("../img/choose-level/star.jpg");
}

.back:after{
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        display: block;
        background:rgba(55, 58, 66, 0.4);
}

.inner{
        -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
                transform: translateY(-50%) translateZ(60px) scale(0.94);
        top: 50%;
        position: absolute;
        left: 0;
        width: 100%;
        padding: 2rem;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        outline: 1px solid transparent;
        -webkit-perspective: inherit;
                perspective: inherit;
        z-index: 2;
}

.container .back{
        -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
}

.container .front{
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
}

.container:hover .back{
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
}

.container:hover .front{
        -webkit-transform: rotateY(-180deg);
                transform: rotateY(-180deg);
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
}

.front .inner p{
        font-size: 2rem;
        margin-bottom: 2rem;
        position: relative;
}

.front .inner p:after{
        content: '';
        width: 4rem;
        height: 2px;
        position: absolute;
        background: #C6D4DF;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -.75rem;
}

.front .inner span{
        font-weight: 500;
}


/* ------------- 关闭按钮 --------------- */

.btn {
        color: #fff;
        cursor: pointer;
        font-size: 20px;
        line-height: 45px;
        margin: 20px 20px;
        max-width: 160px;
        position: absolute;
        z-index:2;
        text-decoration: none;
        text-align: center;
        width: 100%;
        letter-spacing: 0;
}

.btn:hover, .btn:hover:after,
.btn:hover:before {
        text-decoration: none;
        letter-spacing: 5px;
        border-color: #fff;
        width: 80%;
}

.btn:hover:before {
        top: -2px;
}

.btn:after, .btn:before {
        border: 1px solid rgba(255, 255, 255, 0);
        content: " ";
        display: block;
        margin: 0 auto;
        position: relative;
        -webkit-transition: all 280ms ease-in-out;
                transition: all 280ms ease-in-out;
        width: 0;
}
